  <!-- 打印 组件 -->
<template>
  <div>
    <el-card class="box-card">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>表单设计</el-breadcrumb-item>
        <el-breadcrumb-item>表单设计器</el-breadcrumb-item>
      </el-breadcrumb>
      <el-form :inline="true" :model="formInline" size="small">
        <el-form-item label="采购人">
          <el-input v-model="formInline.user" placeholder="审批人" />
        </el-form-item>
        <el-form-item label="入库状态">
          <el-select v-model="formInline.region" placeholder="入库状态">
            <el-option label="已入库" value="shanghai" />
            <el-option label="待入库" value="beijing" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" plain @click="onSubmit">查询</el-button>
          <el-button type="primary" plain>重置</el-button>
        </el-form-item>
        <el-form-item class="exportCs">
          <el-button v-print="printObj" ghost>打印</el-button>
          <!-- <el-button size="small" @click="exportToExcel">导出</el-button> -->
          <download-excel :data="tableData" :fields="json_fields" name="采购单-统计列表" class="excel"> 导出Excel</download-excel>
        </el-form-item>
      </el-form>
      <div id="printMe" style="text-align:center;">
        <div style="text-align: center">
          <p style="font-size: 24px;font-weight: 800">XXX公司-采购单</p>
        </div>
        <el-row :gutter="24" class="elSpan">
          <el-col :span="8">
            <span>采购单号：</span>
            <span>123</span>
          </el-col>
          <el-col :span="8">
            <span>采购单日期：</span>
            <span>2020-11-10</span>
          </el-col>
          <el-col :span="8">
            <span>采购人员：</span>
            <span>钢铁侠</span>
          </el-col>
        </el-row>
        <el-row :gutter="24" class="elSpan">
          <el-col :span="8">
            <span>供应商名称：</span>
            <span>小飞侠</span>
          </el-col>
          <el-col :span="8">
            <span>仓库名称：</span>
            <span>12仓库</span>
          </el-col>
          <el-col :span="8">
            <span>入库状态：</span>
            <span>待入库</span>
          </el-col>
        </el-row>
        <el-table :data="tableData" style="width: 100%" @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55" />
          <el-table-column prop="no" label="采购单号" sortable />
          <el-table-column prop="name" label="采购人员" />
          <el-table-column prop="name" label="供应商名称" />
          <el-table-column prop="name" label="仓库名称" />
          <el-table-column prop="date" label="采购单日期" sortable />
          <el-table-column prop="address" label="入库状态" />
          <el-table-column fixed="right" label="操作" min-width="100">
            <template slot-scope="scope">
              <el-button type="text" size="small" @click="handleEdit(scope.row)">编辑</el-button>
              <el-button type="text" size="small" @click="handleDelete(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-card>
  </div>
</template>
<script>
export default {
  data() {
    return {
      formInline: {},
      tableData: [{
        id: 1,
        no: 'BXS1536',
        userName: '钢铁侠',
        date: '2020-11-12',
        price: 68,
        address: '已入库',
      }, {
        id: 2,
        no: 'BXS1539',
        userName: '王小虎',
        date: '2020-11-04',
        price: 12,
        address: '待入库',
      }],
      printObj: {
        id: 'printMe',
        popTitle: '打印',
        extraCss: '',
        extraHead: '<meta http-equiv="Content-Language"content="zh-cn"/>',
        endCallback: null, // 成功打印后的回调函数
      },
      json_fields: { '采购单号': 'no', '采购人员': 'userName', '采购时间': 'date', '采购单价': 'price', '入库状态': 'address' }, // 导出Excel表格的表头设置
      json_data: [],
      loading: false,
    };
  },
  methods: {
    // 查询
    onSubmit() {
    },
    // 编辑
    handleEdit() {
    },
    // 删除
    async handleDelete() {
      const confirmResult = await this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).catch((err) => err);
      if (confirmResult !== 'confirm') {
        return this.$message.info('已取消删除');
      }
    },
    // 选中的数据
    handleSelectionChange(val) {

    },
  },
};
</script>

<style lang="scss" scoped>
.elSpan {
  margin: 15px 0;
}
.exportCs {
  margin-right: 30px;
  float: right;
  .excel {
    margin-left: 15px;
    display: inline-block;
    line-height: 1;
    white-space: nowrap;
    background: #fff;
    border: 1px solid #dcdfe6;
    color: #606266;
    text-align: center;
    box-sizing: border-box;
    outline: 0;
    padding: 9px 15px;
    font-size: 12px;
    border-radius: 3px;
    cursor: pointer;
  }
}
@media print {
  @page {
    size: landscape; /*对打印的尺寸进行设置*/
    margin: 0; /*去掉上面的水印*/
  }
}
</style>
